<template>
  <div class="messageList">
    <div class="box">
      <div style="width: 1200px; padding: 20px 0; margin: 0 auto">
        <a-breadcrumb separator=">">
          <a-breadcrumb-item>首页</a-breadcrumb-item>
          <a-breadcrumb-item href=""> 创业就业 </a-breadcrumb-item>
          <a-breadcrumb-item style="color: #fb6d00"
            >信息库列表</a-breadcrumb-item
          >
        </a-breadcrumb>
      </div>
      <div class="tabs">
        <p
          :class="{ active: tagIndex == index }"
          @click="(tagIndex = index), searchMsgList(item.code)"
          v-for="(item, index) in InformationList"
          :key="index"
        >
          {{ item.name }}
        </p>
      </div>
      <ul class="messages" v-if="InformationData.length">
        <li v-for="(msgItem, index) in InformationData" :key="index + 'msg'">
          <div class="img">
            <img
              :src="GLOBAL.lochostUrl + msgItem.cover"
              @error="$event.target.src = GLOBAL.defaultCover"
              alt=""
              class="leftimg"
            />
          </div>
          <div class="rightCont">
            <p class="messTitle">{{ msgItem.title }}</p>
            <div class="navmsg">
              <p>发布：{{ msgItem.publishTime }}</p>
              <p>阅读量：{{ msgItem.browseNum }}</p>
              <p>来源：{{ msgItem.source }}</p>
            </div>
            <p class="content">{{ msgItem.intro }}</p>
          </div>
        </li>
      </ul>

      <a-empty
        :image="imgUrl"
        :image-style="{
          height: '220px',
        }"
        style="margin: 0 auto; margin-top: 88px"
        v-if="InformationData.length < 1"
      />
    </div>
    <div class="cnBottom" v-if="InformationData.length > 1">
      <div style="margin: 0 auto; width: 230px">
        <a-button @click="more()" v-show="btnState == 1" class="sobtn"
          >点击加载更多</a-button
        >
         <a-button v-show="btnState == 2" loading="true" class="sobtn">正在加载中</a-button>
        <span class="timeTxt1" v-if="btnState == 3">没有更多了</span>
      </div>
    </div>
    <Loading v-show="onLoading"></Loading>
  </div>
</template>

<script>
export default {
  data() {
    return {
      // 怕版权影响换张图片
      imgUrl: require("@/assets/image/pagint.png"),
      InformationList: [],
      tagIndex: 0, //标签下标
      btnState: 1,
      pageIndex: 1,
      pageSize: 10,
      InformationData: [],
      onLoading:false
    };
  },
  methods: {
    // 加载更多
    more() {
      this.btnState = 2;
      this.pageIndex++;
      this.getMsgList(this.msgType);
    },
    searchMsgList(msgType) {
      this.msgType = msgType;
      this.getMsgList(msgType);
    },
    // 查询分类
    getCflist() {
      this.$ajax({
        url: "/news/code/list/name?codeType=" + 12,
        method: "post",
      }).then((res) => {
        if (res.code == 200) {
          this.InformationList = res.data;
        } else {
          this.InformationList = [];
        }
        // console.log(this.InformationData);
      });
    },
    // 查询列表
    getMsgList(msgType) {
      this.onLoading = true
      let ber = [];
      this.$ajax({
        url:
          "/news/msginfo/list/msg?pageSize=" +
          this.pageSize +
          "&pageIndex=" +
          this.pageIndex +
          "&msgType=" +
          msgType,
        method: "post",
      }).then((res) => {
        if (res.data.totalCount > 0) {
          this.onLoading = false
          ber = res.data.list;
          for (var i in ber) {
            this.InformationData.push(ber[i]);
          }
         if (this.pageIndex >= res.data.totalPage) {
            this.btnState = 3;
          } else {
            this.btnState = 1;
          }
        } else {
          this.onLoading = false
          this.InformationData = [];
        }
        // console.log(this.InformationData);
      });
    },
  },
  mounted() {
    this.getCflist();
    this.getMsgList('XXK01');
  },
};
</script>

<style scoped lang="less">
.messageList {
  background-color: #f8f8f8;
  // padding-top: 150px;
  .box {
    width: 1200px;
    margin: 0 auto;
  }
  .tabs {
    display: flex;
    align-items: center;
    height: 40px;
    padding-left: 24px;
    background-color: #ffffff;
    margin-bottom: 20px;
    cursor: pointer;
    p {
      margin-right: 50px;
      color: #000000;
      font-size: 16px;
      line-height: 22px;
    }
    .active {
      color: #fb6d00;
      font-weight: 600;
    }
  }
  .messages {
    li {
      display: flex;
      background-color: #ffffff;
      padding: 25px 30px;
      border-bottom: 1px solid #eeeeee;
      margin-bottom: 24px;
      box-shadow: 0px 2px 6px 0px rgba(0, 0, 0, 0.1);
      .img {
        width: 196px;
        height: 120px;
        overflow: hidden;
        margin-right: 32px;
        img {
          width: 100%;
          height: 100%;
          transition: transform 0.5s linear;
        }
      }
      .img:hover {
        img {
          transform: scale(1.1);
        }
      }
      .rightCont {
        flex: 1;
        padding: 0 18px 0 0;
        .messTitle {
          color: #333333;
          font-size: 18px;
          line-height: 25px;
          font-weight: bold;
          padding-top: 5px;
          overflow: hidden;
          white-space: nowrap;
          text-overflow: ellipsis;
        }
        .navmsg {
          margin-top: 8px;
          display: flex;
          p {
            margin-right: 56px;
            color: #666666;
            font-size: 13px;
            line-height: 18px;
          }
        }
        .content {
          margin-top: 16px;
          display: -webkit-box;
          -webkit-box-orient: vertical;
          -webkit-line-clamp: 2;
          overflow: hidden;
          color: #000000;
          font-size: 15px;
          line-height: 21px;
        }
      }
    }
    li:last-child {
      border: 0;
      margin-bottom: 0;
    }
  }
}
</style>
